<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="../css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="../css/sass.css">
    <link href="../css/swiper.css" rel="stylesheet">
    <script src="../js/swiper.js"></script>
    <script src="../../baiduTemplate.js"></script>
    <script src="../../jquery1.11.1.min.js"></script>


</head>
<body>
<!--头部-->
    <footer>
        <div id="footerDiv">
            <span>北京</span>
            <span style="border-right:1px solid #cccccc" id="qhcs">[切换城市]</span>
            <span>同城帮首页</span>
        </div>
        <ul id="list">
            <li id="dl">登录</li>
            <li id="zc">注册</li>
            <li>我的订单</li>
            <li>在线客服（9:00-21:00）</li>
            <li>客户服务</li>
            <li>论坛</li>
            <li style="border-right:none;color:red;">投诉建议</li>
        </ul>
    </footer>

<!--导航栏-->
    <div id="nav">
        <img src="../image/7.png">
        <ul id="navList">
            <li>二手优品</li>
            <li>手机回收</li>
            <li>手机维修</li>
            <li>电脑维修</li>
            <li>以旧换新</li>
            <li>手机租用</li>
        </ul>
    </div>

<!--轮播图-->
<div id="div0">
    <div class="swiper-container" id="lbDiv">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="../image/1.jpg"></div>
            <div class="swiper-slide"><img src="../image/2.jpg"></div>
            <div class="swiper-slide"><img src="../image/3.png"></div>
        </div>
    </div>
</div>

<!--维修链接-->
    <ul id="lbList">
        <li>手机维修/Pad<img src="../image/12.png"></li>
        <li>修电脑<img src="../image/12.png"></li>
        <li>卖手机/电脑<img src="../image/12.png"></li>
        <li>买二手机<img src="../image/12.png"></li>
    </ul>

<!--手机换屏-->
<div id="div1">
    <div>
        <h2>手机换屏</h2>
        <p>上门服务&nbsp;180天质保</p>
        <img src="../image/4.jpg">
    </div>
    <div>
        <h2>iPhone更换全新电池</h2>
        <p>仅需98元起</p>
        <img src="../image/4.jpg">
    </div>
    <div>
        <h2>0元拿kindel</h2>
        <p>以旧换新&nbsp;最低0元拿</p>
        <img src="../image/4.jpg">
    </div>
    <div style="border-right:none;">
        <h2>手机升级</h2>
        <p>0元起拿iphone</p>
        <img src="../image/4.jpg">
    </div>
</div>


<!--热门回收-->
<div class="fixa">
    <h2>热门手机回收</h2>
    <a href="#">查看更多 <img src="../image/12.png"></a>
</div>
<div class="Tus">
    <img src="../image/24.jpg">
    <ul class="Tus1">
        <li><img src="../image/5.jpg">
            <p>苹果iPhone6</p>
        </li>
        <li><img src="../image/5.jpg">
            <p>苹果iPhone6</p>
        </li>
        <li><img src="../image/5.jpg">
            <p>苹果iPhone6</p>
        </li>
        <li><img src="../image/5.jpg">
            <p>苹果iPhone6</p>
        </li>
        <li><img src="../image/5.jpg">
            <p>苹果iPhone6</p>
        </li>
    </ul>
</div>
<div class="fixa">
    <h2>优品精选</h2>
    <a href="#">查看更多 <img src="../image/12.png"></a>
</div>
<div class="Tus">
    <img src="../image/24.jpg">
    <ul class="Tus1">
        <li><img src="../image/5.jpg">
            <p>苹果iPhone6</p>
            <p class="ps">￥2600</p>
        </li>
        <li><img src="../image/5.jpg">
            <p>苹果iPhone6</p>
            <p class="ps">￥2600</p>
        </li>
        <li><img src="../image/5.jpg">
            <p>苹果iPhone6</p>
            <p class="ps">￥2600</p>
        </li>
        <li><img src="../image/5.jpg">
            <p>苹果iPhone6</p>
            <p class="ps">￥2600</p>
        </li>
        <li><img src="../image/5.jpg">
            <p>苹果iPhone6</p>
            <p class="ps">￥2600</p>
        </li>
    </ul>
</div>



<!--到店维修-->
<div class="fixa">
    <h2>到店维修</h2>
</div>
<div class="bia">
    <div class="weixiu">
        <div class="W_left">
            <div class="sas">
                <div class="shi">
                    <span>北京</span>
                    <span class="caret"></span>
                </div>
                <div class="shi">
                    <span>选择区县</span>
                    <span class="caret"></span>
                </div>
                <div class="shangjia">
                    <input type="text" placeholder="输入您的位置查找附近的商家" class="in1">
                    <input type="button" value="搜索" class="in2">
                </div>
            </div>
            <div class="moren">
                <div class="mes">
                    <ul>
                        <li id="mr">默认排序</li>
                        <li id="cjl">按成交量</li>
                        <li id="rq">按人气</li>
                        <li><input type="checkbox">先行赔付</li>
                    </ul>
                    <div class="ditu">
                        <span id="dt"><img src="../image/13.png" alt="">地图模式</span>
                    </div>
                </div>
            </div>
            <div class="dfg">
                <!--<div class="dianpu">
                    <img src="../image/ss.jpg" class="ms">
                    <div class="hdua">
                        <p><span class="sps">顺通电脑维修</span> <span>店铺等级：</span><img src="../image/17.png"><img src="../image/17.png"></p>
                        <p>主营：电脑维修，电脑周边配件，系统维护，网络安装，打印机加粉</p>
                        <p>地址：北京通州区瑞都国际南区12号楼底商12-2</p>
                    </div>
                    <div class="pei">
                        <p><img src="../image/15.png">先行赔付</p>
                        <p><img src="../image/16.png">同城帮认证</p>
                        <p>人气：155005次浏览</p>
                    </div>
                    <div class="ru">
                        <span>进入店铺</span>
                    </div>
                </div>-->
                <!--<div class="dianpu">-->
                    <!--<img src="../image/hong.jpg" class="ms">-->
                    <!--<div class="hdua">-->
                        <!--<p><span class="sps">鸿翔科技（北京）有限公司 </span> <span>店铺等级：</span><img src="../image/17.png"><img src="../image/17.png"></p>-->
                        <!--<p>主营：电脑维修，电脑周边配件，系统维护，网络安装，打印机加粉</p>-->
                        <!--<p>地址：北京通州区瑞都国际南区12号楼底商12-2</p>-->
                    <!--</div>-->
                    <!--<div class="pei">-->
                        <!--<p><img src="../image/15.png">先行赔付</p>-->
                        <!--<p><img src="../image/16.png">同城帮认证</p>-->
                        <!--<p>人气：155005次浏览</p>-->
                    <!--</div>-->
                    <!--<div class="ru">-->
                        <!--<span>进入店铺</span>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="dianpu">-->
                    <!--<img src="../image/13.jpg" class="ms">-->
                    <!--<div class="hdua">-->
                        <!--<p><span class="sps">北京鸿翔科技 </span> <span>店铺等级：</span><img src="../image/17.png"><img src="../image/17.png"></p>-->
                        <!--<p>主营：电脑维修，电脑周边配件，系统维护，网络安装，打印机加粉</p>-->
                        <!--<p>地址：北京通州区瑞都国际南区12号楼底商12-2</p>-->
                    <!--</div>-->
                    <!--<div class="pei">-->
                        <!--<p><img src="../image/15.png">先行赔付</p>-->
                        <!--<p><img src="../image/16.png">同城帮认证</p>-->
                        <!--<p>人气：155005次浏览</p>-->
                    <!--</div>-->
                    <!--<div class="ru">-->
                        <!--<span>进入店铺</span>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="dianpu">-->
                    <!--<img src="../image/dian.jpg" class="ms">-->
                    <!--<div class="hdua">-->
                        <!--<p><span class="sps">联金诚维修中心 </span> <span>店铺等级：</span><img src="../image/17.png"><img src="../image/17.png"></p>-->
                        <!--<p>主营：电脑维修，电脑周边配件，系统维护，网络安装，打印机加粉</p>-->
                        <!--<p>地址：北京通州区瑞都国际南区12号楼底商12-2</p>-->
                    <!--</div>-->
                    <!--<div class="pei">-->
                        <!--<p><img src="../image/15.png">先行赔付</p>-->
                        <!--<p><img src="../image/16.png">同城帮认证</p>-->
                        <!--<p>人气：155005次浏览</p>-->
                    <!--</div>-->
                    <!--<div class="ru">-->
                        <!--<span>进入店铺</span>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="dianpu">-->
                    <!--<img src="../image/sheng.gif" class="ms">-->
                    <!--<div class="hdua">-->
                        <!--<p><span class="sps">盛宏科技CBD维修工作</span> <span>店铺等级：</span><img src="../image/17.png"><img src="../image/17.png"></p>-->
                        <!--<p>主营：电脑维修，电脑周边配件，系统维护，网络安装，打印机加粉</p>-->
                        <!--<p>地址：北京通州区瑞都国际南区12号楼底商12-2</p>-->
                    <!--</div>-->
                    <!--<div class="pei">-->
                        <!--<p><img src="../image/15.png">先行赔付</p>-->
                        <!--<p><img src="../image/16.png">同城帮认证</p>-->
                        <!--<p>人气：155005次浏览</p>-->
                    <!--</div>-->
                    <!--<div class="ru">-->
                        <!--<span>进入店铺</span>-->
                    <!--</div>-->
                <!--</div>-->
            </div>
            <div class="fenye">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                    <li>10</li>
                    <li class="lis">下一页》</li>
                </ul>
            </div>
        </div>
        <!--商家好评榜-->
        <div class="bang">
            <div class="paihang">
                <span>商家好评榜</span>
            </div>
            <div class="paiming">
                <div class="one">①</div>
                <div class="dtu"><img src="../image/dian.jpg"></div>
                <div class="gs"><p>联金诚维修中心</p><p>121706条评论</p></div>
            </div>
            <div class="paiming">
                <div class="one">②</div>
                <div class="dtu"><img src="../image/ss.jpg"></div>
                <div class="gs"><p>联金诚维修中心</p><p>121706条评论</p></div>
            </div>
            <div class="paiming">
                <div class="one">③</div>
                <div class="dtu"><img src="../image/sheng.gif"></div>
                <div class="gs"><p>联金诚维修中心</p><p>121706条评论</p></div>
            </div>
            <div class="paiming">
                <div class="one houm">④</div>
                <div class="dtu"><img src="../image/dian.jpg"></div>
                <div class="gs"><p>联金诚维修中心</p><p>121706条评论</p></div>
            </div>
            <div class="paiming">
                <div class="one houm">⑤</div>
                <div class="dtu"><img src="../image/dian.jpg"></div>
                <div class="gs"><p>联金诚维修中心</p><p>121706条评论</p></div>
            </div>
            <div class="paiming">
                <div class="one houm">⑥</div>
                <div class="dtu"><img src="../image/dian.jpg"></div>
                <div class="gs"><p>联金诚维修中心</p><p>121706条评论</p></div>
            </div>
            <div class="paiming">
                <div class="one houm">⑦</div>
                <div class="dtu"><img src="../image/dian.jpg"></div>
                <div class="gs"><p>联金诚维修中心</p><p>121706条评论</p></div>
            </div>
        </div>
    </div>
</div>
<!--底部-->
<div class="wei">
    <div class="divs">
        <ul>
            <li>
                <img src="../image/18.jpg">
                <div>
                    <p>购物指南</p>
                    <p>购物流程</p>
                    <p>帮助文档</p>
                </div>
            </li>
            <li>
                <img src="../image/18.jpg">
                <div>
                    <p>购物指南</p>
                    <p>购物流程</p>
                    <p>帮助文档</p>
                </div>
            </li>
            <li>
                <img src="../image/18.jpg">
                <div>
                    <p>购物指南</p>
                    <p>购物流程</p>
                    <p>帮助文档</p>
                </div>
            </li>
            <li>
                <img src="../image/18.jpg">
                <div>
                    <p>购物指南</p>
                    <p>购物流程</p>
                    <p>帮助文档</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="dis">
        <p>客服电话：4000-399-360 / 010-53767360 <a href="#">投诉建议</a><a href="#">网站地图</a></p>
        <p>Copyright © 2005-2017  360.CN  All Rights Reserved  360安全中心</p>
        <p><a href="#">京ICP备08010314号-19</a> 京公网安备110000000006号</p>
    </div>
</div>


<!--城市切换-->
<div id="citypage">
    <p>热门</p>
    <ul id="hotList"></ul>
    <p>拼音</p>
    <ul id="pyList"></ul>
    <ul id="cityList"></ul>
</div>


<!--登录-->
<div id="dlzc1">
    <h1>手机号登录</h1>
    <div>
        手机号：<input type="text" id="tels"><span></span><br>
        密码号：<input type="text" id="pwds"><br>
        <button id="dlDiv">登录</button>
    </div>
</div>

<!--注册-->
<div id="dlzc">
    <h1>手机号注册</h1>
    <div>
        手机号：<input type="text" id="tel"><span></span><br>
        验证码：<input type="text" id="yzm"><span id="yz"></span><a href="#" onclick="getYZM()">换一张</a><br>
        校验码：<input type="text" id="xym"><button onclick="getXYM()">点击获取校验码</button><br>
        密码号：<input type="text" id="pwd"><br>
        <input type="checkbox">同意条款 <br>
        <button onclick="addUser()" id="zcDiv">注册</button>
    </div>
</div>


<!--地图-->
<div id="dt1">
    <div id="cx"><span id="span1">高德地图</span><span id="span2">×</span></div>
    <div id="container" style="width:600px; height:400px;margin:auto;"></div>
</div>


<!--排序-->
<script type="text/html" id="pxTp">
    <%for(var i=0;i< arr.length;i++){%>
        <div class="dianpu">
            <img src="../image/hong.jpg" class="ms">
            <div class="hdua">
                <p><span class="sps"><%=arr[i].shop_name%></span> <span>店铺等级：</span><img src="../image/17.png"><img src="../image/17.png"></p>
                <p>主营：<%=arr[i].main%></p>
                <p>地址：<%=arr[i].addr_detail%></p>
            </div>
            <div class="pei">
                <p><img src="../image/15.png">先行赔付</p>
                <p><img src="../image/16.png">同城帮认证</p>
                <p>人气：<%=arr[i].shop_visit%>次浏览</p>
            </div>
            <div class="ru">
                <span>进入店铺</span>
            </div>
        </div>
    <%}%>

</script>


<!--热门-->
<script type="text/html" id="cytp">
    <%for(var i=0;i< arr.length;i++){%>
    <li><%=arr[i].name%></li>
    <%}%>
</script>

<!--拼音-->
<script type="text/html" id="pytp">
    <%for(var i in pyObj){%>
    <li onclick="tab('<%=i%>')"><%=i%></li>
    <%}%>
</script>

<!--城市-->
<script type="text/html" id="citytp">
    <%for(var i=0;i< arr.length;i++){%>
    <li><%=arr[i].name%></li>
    <%}%>
</script>

<script>
    var obj={};
    $.get("http://localhost:6500/src/data/city.json",function (res) {
        console.log(res);
        obj.arr=res.result.hotcity;
        obj.pyObj=res.result.citylist;
        $("#hotList").html(baidu.template("cytp",obj));
        $("#pyList").html(baidu.template("pytp",obj));
    });

    function tab(k) {
        var arr=obj.pyObj[k];
        var cityObj={};
        cityObj.arr=arr;
        $("#cityList").html(baidu.template("citytp",cityObj));
    }


    $("#qhcs").click(function () {
        $("#citypage").toggle()
    })



    //检验手机号是否重复注册
    $("#tel").on("blur",function () {

        $.get("http://localhost:6500/isrepeat",{tel:$("#tel").val()},function (res) {
            console.log(res)
            if(res==0){
                $("#tel").next().html("该手机号已被注册，请直接登录")
            }else {
                $("#tel").next().html("√")
            }
        })
    })


    //获取验证码
    function getYZM() {
        $.post("http://localhost:6500/yzm",function (res) {
            console.log(res);
            $("#yz").html(res)
        })
    }
    getYZM();


    //获取校验码
    function getXYM() {
        $.post("http://localhost:6500/xym",{tel:$("#tel").val(),time:(new Date()).getTime()},function (res) {
            console.log(res);
            $("#xym").val(res)
        })
    }

    function clickXY() {
        if($("#tel").val()==""){
            $("#tel").next().html("手机号不能为空");
            return;
        }else  if($("yzm").val()==""){
            $("yz").html("验证码不能为空")
        }else {
            getXYM()
        }
    }


    //注册
    function addUser() {
        $.post("http://localhost:6500/adduser",{
            tel:$("#tel").val(),
            pwd:$("#pwd").val(),
            time:(new Date()).getTime(),
            xym:$("#xym").val()
        },function (res) {
            console.log(res);
        })
    }



    //注册
    $("#zc").click(function () {
        $("#dlzc").show();
    });
    $("#zcDiv").click(function () {
        $("#dlzc").hide();
    });



    //登录
    $("#dl").click(function () {
        $("#dlzc1").show();
    });
    $("#dlDiv").click(function () {
        $("#dlzc1").hide();
    });


    //地图
    $("#dt").click(function () {
        $("#dt1").show();
    });
    $("#cx").click(function () {
        $("#dt1").hide();
    });




    //排序
    getpx("");
    function getpx(type) {
        $.get("http://localhost:6500/px",{
            type:type
        },function (res) {
            console.log(res);
            var obj={};
            obj.arr=res;
            $(".dfg").html(baidu.template("pxTp",obj));
        })
    }


    $("#mr").click(function () {
        getpx("")
    });
    $("#cjl").click(function () {
        getpx("count")
    });
    $("#rq").click(function () {
        getpx("shop_visit")
    });

</script>

<!--添加地图-->
<script src="https://webapi.amap.com/maps?v=1.4.0&key=8b7592524cc8ba5d1d4ff6a7446befaa"></script>
<script>
    var map = new AMap.Map('container',{
        zoom: 10,
        center: [116.39,39.9]
    });
    AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView'],
        function(){
            map.addControl(new AMap.ToolBar());

            map.addControl(new AMap.Scale());

            map.addControl(new AMap.OverView({isOpen:true}));
        })
</script>


    <script src="../js/tcb.js"></script>
</body>
</html>